<template>
  <view>
    <hx-navbar ref="hxnb" :config="config">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
              @blur="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <div class="m-t-120"></div>
    <cxBankListList v-if="listOptionsOnCurrentShop" @selectedBank="selectedBank" :search="cxBankListSearch"></cxBankListList>
    <cxBankList v-else @selectedBank="selectedBank" :search="cxBankListSearch"></cxBankList>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
// key value格式的列表
import cxBankList from "@/components/cx-bank-list/cx-bank-list.vue";
// 全部信息的列表 有id
import cxBankListList from "@/components/cx-bank-list/cx-bank-list-list.vue";
export default {
  components: {
    clIcon,
    cxBankList,
    cxBankListList
  },
  data() {
    return {
      search: null,
      cxBankListSearch:null,
      config: {
        title: "账户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listOptionsOnCurrentShop:null, //是否展示全部类别 有id的为true 展示 其他展示key value形式
    };
  },
  onLoad() {
    if (this.$Route.query.listOptionsOnCurrentShop) {
      this.listOptionsOnCurrentShop = this.$Route.query.listOptionsOnCurrentShop
    }
  },
  methods: {
    searchChange() {
      this.cxBankListSearch = this.search
    },
    selectedBank(data){
      uni.$emit("selectedBank",data)
      uni.navigateBack()
    }
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
